<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>经营分析</title>
		<!-- Bootstrap -->
		<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
		<link href="fonts/iconfont.css" rel="stylesheet">
		<link href="../assets/css/style.css" rel="stylesheet" />
		<link href="../assets/css/tabletable.css" rel="stylesheet" />
		<link href="../assets/css/motai.css" rel="stylesheet" />
		<link href="../assets/css/content.css" rel="stylesheet" />
		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
		      <script src="../assets/js/html5shiv.min.js"></script>
		      <script src="../assets/js/respond.min.js"></script>
		      <![endif]-->
		<style type="text/css">
			.bordernone {
				border: none;
			}
			
			.timefenlei {
				margin-left: 0px;
				margin-top: 20px;
			}
			
			.timefenlei div {
				width: 90px;
				height: 36px;
				float: left;
				line-height: 36px;
				margin-right: 20px;
				text-align: center;
			}
			
			.timefl-btn {
				margin-top: 0px;
				margin-left: 0px;
			}
			
			.monthleiborder {
				border-bottom: 3px solid #E66B18;
			}
			
			.jy_table_list_row_fater {
				padding-left: 15px;
				padding-right: 15px;
			}
			
			@media only screen and (max-width: 360px) {
				.timefenlei div {
					width: 83px;
					margin-right: 15px;
				}
			}
			
			@media only screen and (max-width: 550px) {
				.timefl-btn {
					margin-top: 20px;
				}
			}
			
			.paihang_select {
				width: 173px;
				height: 33px;
				font-size: 14px;
				color: #333333;
				border: 1px solid #D7D7D7;
				border-radius: 33px;
				line-height: 38px;
				box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075);
				float: left;
				margin-top: 8px;
				margin-right: 10px;
			}
		</style>
	</head>

	<body>
		<!--内容区域-->
		<div class="content">
			<div class="content-header col-md-12">
				<div class="con-header">
					<div class="col-md-7 col-sm-7 col-xs-7">
						<span class="content-title-pre"></span><span class="content-title-word">经营分析</span>
					</div>
					<div class="col-md-5 col-sm-5 col-xs-5">
						<button type="button" class="btn btn-info btn-header" data-toggle="modal" data-target="#aa">选择门店</button>
					</div>
				</div>
			</div>
			<div class="content_serach row"></div>
			<div class="timefenlei row">
				<div class="onemonth monthleiborder">近一月</div>
				<div class="threemonth">近三月</div>
				<div class="upmonth">上月</div>
				<button type="button" class="btn btn-info serach_btn timefl-btn">搜索&nbsp;&nbsp;<i class="icon iconfont icon-sousuo icon_serach"></i></button>
			</div>

			<div class="timeflbody">
				<div class="onemonthbody">
					<div class="jyfx-hzzq mt10">
						汇总周期：2016/10/31 00:00:00 至 2016/11/31 00:00
					</div>
					<div class="row jy_table_list_row_fater">
						<div class="jy_table_list col-md-12 mt20">
							<ul>
								<li class="active">列表</li>
								<li>图标</li>
								<li>分类</li>
								<li>排行榜</li>
								<div class="clear"></div>
							</ul>
						</div>
					</div>
					<div class="jy_contet_list bordernone">
						<div class="row"></div>
						<div class="table-responsive">
							<table class="table responsive" id="mytable">
								<thead class="tablethead">
									<tr>
										<th class="firstth" valign="middle">序号</th>
										<th class="secondta">时间</th>
										<th>营业额</th>
										<th>人数</th>
										<th>人均</th>
										<th>桌数</th>
										<th>桌均</th>
										<th class="text-center">上桌率</th>
									</tr>
								</thead>
								<tbody class="mytable table1">
									<tr>
										<td class="firsttd" valign="middle">01</td>
										<td class="secondta">2016-10-10</td>
										<td>11111</td>
										<td>190</td>
										<td>290</td>
										<td>100</td>
										<td>100</td>
										<td class="text-center">120%</td>
									</tr>
									<tr>
										<td class="firsttd" valign="middle">01</td>
										<td class="secondta">2016-10-10</td>
										<td>11111</td>
										<td>190</td>
										<td>290</td>
										<td>100</td>
										<td>100</td>
										<td class="text-center">120%</td>
									</tr>
									<tr>
										<td class="firsttd" valign="middle">01</td>
										<td class="secondta">2016-10-10</td>
										<td>11111</td>
										<td>190</td>
										<td>290</td>
										<td>100</td>
										<td>100</td>
										<td class="text-center">120%</td>
									</tr>
									<tr>
										<td class="firsttd" valign="middle">01</td>
										<td class="secondta">2016-10-10</td>
										<td>11111</td>
										<td>190</td>
										<td>290</td>
										<td>100</td>
										<td>100</td>
										<td class="text-center">120%</td>
									</tr>
									<tr>
										<td class="firsttd" valign="middle">01</td>
										<td class="secondta">2016-10-10</td>
										<td>11111</td>
										<td>190</td>
										<td>290</td>
										<td>100</td>
										<td>100</td>
										<td class="text-center">120%</td>
									</tr>

									<tr>
										<td class="firsttd" valign="middle">01</td>
										<td class="secondta">2016-10-10</td>
										<td>11111</td>
										<td>190</td>
										<td>290</td>
										<td>100</td>
										<td>100</td>
										<td class="text-center">120%</td>
									</tr>

									<tr class="trtr">
										<td class="firsttd" valign="middle">01</td>
										<td class="secondta">2016-10-10</td>
										<td>11111</td>
										<td>190</td>
										<td>290</td>
										<td>100</td>
										<td>100</td>
										<td class="text-center">120%</td>
									</tr>

								</tbody>
							</table>
						</div>

						<div class="paging col-md-6 col-md-offset-6 col-sm-12 col-xs-12 text-right">
							<div class="page-page flr">
								<ul class="pagination">
									<li class="epage">
										<a href="#">上一页</a>
									</li>
									<li class="active">
										<a href="#">1 <span class="sr-only">(current)</span></a>
									</li>
									<li>
										<a href="#">2</a>
									</li>
									<li>
										<a href="#">3</a>
									</li>
									<li>
										<a href="#">...</a>
									</li>
									<li class="epage">
										<a href="#">下一页</a>
									</li>
								</ul>
							</div>
							<div class="page-num flr">共9页，每页10条</div>
						</div>
					</div>
					<div class="jy_contet_list hidden">
						<div id="main" style="height:400px;"></div>
					</div>
					<div class="jy_contet_list hidden">
						<div class="jy_paihang">
							<input type="radio" name="name1" checked="checked">&nbsp;&nbsp;<span>按销量</span>
							<input type="radio" name="name1">&nbsp;&nbsp;<span>按金额</span>
						</div>
						<div class="jy_paihang_caixi">
							<ul>
								<li>
									<span class="youcekuai"></span>
									<span class="jy_paihang_cai">经典火锅菜品:</span>
									<span class="jy_paihang_cai1">6.8%</span>
									<span class="jy_paihang_cai2">32100元</span>
								</li>
								<li>
									<span class="youcekuai"></span>
									<span class="jy_paihang_cai">=地方:</span>
									<span class="jy_paihang_cai1">6.8%</span>
									<span class="jy_paihang_cai2">32100元</span>
								</li>

								<li>
									<span class="youcekuai"></span>
									<span class="jy_paihang_cai">火锅菜品:</span>
									<span class="jy_paihang_cai1">6.8%</span>
									<span class="jy_paihang_cai2">32100元</span>
								</li>

								<li>
									<span class="youcekuai"></span>
									<span class="jy_paihang_cai">经典火回踩:</span>
									<span class="jy_paihang_cai1">6.8%</span>
									<span class="jy_paihang_cai2">32100元</span>
								</li>

							</ul>
						</div>
					</div>
					<div class="jy_contet_list hidden">
						<div class="jy_paihang">
							<select class="form-control paihang_select">
								<option>全部菜类</option>
								<option>全部菜类</option>
								<option>全部菜类</option>
								<option>全部菜类</option>
								<option>全部菜类</option>
							</select>
							<input type="radio" name="name1" checked="checked">&nbsp;&nbsp;<span>按销量</span>
							<input type="radio" name="name1">&nbsp;&nbsp;<span>按金额</span>
						</div>
						<div id="main2" style="height:600px;"></div>
					</div>
				</div>
				<div class="threemonthbody hidden">
					<div class="jyfx-hzzq mt10">
						汇总周期：2016/09/01 00:00:00 至 2016/12/24 00:00
					</div>
					<div class="row jy_table_list_row_fater">
						<div class="jy_table_list col-md-12 mt20">
							<ul>
								<li class="active">列表</li>
								<li>图标</li>
								<li>分类</li>
								<li>排行榜</li>
								<div class="clear"></div>
							</ul>
						</div>
					</div>
					<div class="jy_contet_list bordernone">
						<div class="row"></div>
						<div class="table-responsive">
							<table class="table responsive" id="mytable">
								<thead class="tablethead">
									<tr>
										<th class="firstth" valign="middle">序号</th>
										<th class="secondta">时间</th>
										<th>营业额</th>
										<th>人数</th>
										<th>人均</th>
										<th>桌数</th>
										<th>桌均</th>
										<th class="text-center">上桌率</th>
									</tr>
								</thead>
								<tbody class="mytable table1">
									<tr>
										<td class="firsttd" valign="middle">01</td>
										<td class="secondta">2016-10-10</td>
										<td>11111</td>
										<td>190</td>
										<td>290</td>
										<td>100</td>
										<td>100</td>
										<td class="text-center">120%</td>
									</tr>
									<tr>
										<td class="firsttd" valign="middle">01</td>
										<td class="secondta">2016-10-10</td>
										<td>11111</td>
										<td>190</td>
										<td>290</td>
										<td>100</td>
										<td>100</td>
										<td class="text-center">120%</td>
									</tr>
									<tr>
										<td class="firsttd" valign="middle">01</td>
										<td class="secondta">2016-10-10</td>
										<td>11111</td>
										<td>190</td>
										<td>290</td>
										<td>100</td>
										<td>100</td>
										<td class="text-center">120%</td>
									</tr>
									<tr>
										<td class="firsttd" valign="middle">01</td>
										<td class="secondta">2016-10-10</td>
										<td>11111</td>
										<td>190</td>
										<td>290</td>
										<td>100</td>
										<td>100</td>
										<td class="text-center">120%</td>
									</tr>
									<tr>
										<td class="firsttd" valign="middle">01</td>
										<td class="secondta">2016-10-10</td>
										<td>11111</td>
										<td>190</td>
										<td>290</td>
										<td>100</td>
										<td>100</td>
										<td class="text-center">120%</td>
									</tr>

									<tr>
										<td class="firsttd" valign="middle">01</td>
										<td class="secondta">2016-10-10</td>
										<td>11111</td>
										<td>190</td>
										<td>290</td>
										<td>100</td>
										<td>100</td>
										<td class="text-center">120%</td>
									</tr>

									<tr class="trtr">
										<td class="firsttd" valign="middle">01</td>
										<td class="secondta">2016-10-10</td>
										<td>11111</td>
										<td>190</td>
										<td>290</td>
										<td>100</td>
										<td>100</td>
										<td class="text-center">120%</td>
									</tr>

								</tbody>
							</table>
						</div>

						<div class="paging col-md-6 col-md-offset-6 col-sm-12 col-xs-12 text-right">
							<div class="page-page flr">
								<ul class="pagination">
									<li class="epage">
										<a href="#">上一页</a>
									</li>
									<li class="active">
										<a href="#">1 <span class="sr-only">(current)</span></a>
									</li>
									<li>
										<a href="#">2</a>
									</li>
									<li>
										<a href="#">3</a>
									</li>
									<li>
										<a href="#">...</a>
									</li>
									<li class="epage">
										<a href="#">下一页</a>
									</li>
								</ul>
							</div>
							<div class="page-num flr">共9页，每页10条</div>
						</div>
					</div>
					<div class="jy_contet_list hidden">
						<div id="main_three" style="height:400px;"></div>
					</div>
					<div class="jy_contet_list hidden">
						<div class="jy_paihang">
							<input type="radio" name="name1" checked="checked">&nbsp;&nbsp;<span>按销量</span>
							<input type="radio" name="name1">&nbsp;&nbsp;<span>按金额</span>
						</div>
						<div class="jy_paihang_caixi">
							<ul>
								<li>
									<span class="youcekuai"></span>
									<span class="jy_paihang_cai">经典火锅菜品:</span>
									<span class="jy_paihang_cai1">6.8%</span>
									<span class="jy_paihang_cai2">32100元</span>
								</li>
								<li>
									<span class="youcekuai"></span>
									<span class="jy_paihang_cai">=地方:</span>
									<span class="jy_paihang_cai1">6.8%</span>
									<span class="jy_paihang_cai2">32100元</span>
								</li>

								<li>
									<span class="youcekuai"></span>
									<span class="jy_paihang_cai">火锅菜品:</span>
									<span class="jy_paihang_cai1">6.8%</span>
									<span class="jy_paihang_cai2">32100元</span>
								</li>

								<li>
									<span class="youcekuai"></span>
									<span class="jy_paihang_cai">经典火回踩:</span>
									<span class="jy_paihang_cai1">6.8%</span>
									<span class="jy_paihang_cai2">32100元</span>
								</li>

							</ul>
						</div>
					</div>
					<div class="jy_contet_list hidden">
						<div class="jy_paihang">
							<select class="form-control paihang_select">
								<option>全部菜类</option>
								<option>全部菜类</option>
								<option>全部菜类</option>
								<option>全部菜类</option>
								<option>全部菜类</option>
							</select>
							<input type="radio" name="name1" checked="checked">&nbsp;&nbsp;<span>按销量</span>
							<input type="radio" name="name1">&nbsp;&nbsp;<span>按金额</span>
						</div>
						<div id="main_three2" style="height:600px;"></div>
					</div>
				</div>
				<div class="upmonthbody hidden">
					<div class="jyfx-hzzq mt10">
						汇总周期：2016/12/01 00:00:00 至 2016/12/24 00:00
					</div>
					<div class="row jy_table_list_row_fater">
						<div class="jy_table_list col-md-12 mt20">
							<ul>
								<li class="active">列表</li>
								<li>图标</li>
								<li>分类</li>
								<li>排行榜</li>
								<div class="clear"></div>
							</ul>
						</div>
					</div>
					<div class="jy_contet_list bordernone">
						<div class="row"></div>
						<div class="table-responsive">
							<table class="table responsive" id="mytable">
								<thead class="tablethead">
									<tr>
										<th class="firstth" valign="middle">序号</th>
										<th class="secondta">时间</th>
										<th>营业额</th>
										<th>人数</th>
										<th>人均</th>
										<th>桌数</th>
										<th>桌均</th>
										<th class="text-center">上桌率</th>
									</tr>
								</thead>
								<tbody class="mytable table1">
									<tr>
										<td class="firsttd" valign="middle">01</td>
										<td class="secondta">2016-10-10</td>
										<td>11111</td>
										<td>190</td>
										<td>290</td>
										<td>100</td>
										<td>100</td>
										<td class="text-center">120%</td>
									</tr>
									<tr>
										<td class="firsttd" valign="middle">01</td>
										<td class="secondta">2016-10-10</td>
										<td>11111</td>
										<td>190</td>
										<td>290</td>
										<td>100</td>
										<td>100</td>
										<td class="text-center">120%</td>
									</tr>
									<tr>
										<td class="firsttd" valign="middle">01</td>
										<td class="secondta">2016-10-10</td>
										<td>11111</td>
										<td>190</td>
										<td>290</td>
										<td>100</td>
										<td>100</td>
										<td class="text-center">120%</td>
									</tr>
									<tr>
										<td class="firsttd" valign="middle">01</td>
										<td class="secondta">2016-10-10</td>
										<td>11111</td>
										<td>190</td>
										<td>290</td>
										<td>100</td>
										<td>100</td>
										<td class="text-center">120%</td>
									</tr>
									<tr>
										<td class="firsttd" valign="middle">01</td>
										<td class="secondta">2016-10-10</td>
										<td>11111</td>
										<td>190</td>
										<td>290</td>
										<td>100</td>
										<td>100</td>
										<td class="text-center">120%</td>
									</tr>

									<tr>
										<td class="firsttd" valign="middle">01</td>
										<td class="secondta">2016-10-10</td>
										<td>11111</td>
										<td>190</td>
										<td>290</td>
										<td>100</td>
										<td>100</td>
										<td class="text-center">120%</td>
									</tr>

									<tr class="trtr">
										<td class="firsttd" valign="middle">01</td>
										<td class="secondta">2016-10-10</td>
										<td>11111</td>
										<td>190</td>
										<td>290</td>
										<td>100</td>
										<td>100</td>
										<td class="text-center">120%</td>
									</tr>

								</tbody>
							</table>
						</div>

						<div class="paging col-md-6 col-md-offset-6 col-sm-12 col-xs-12 text-right">
							<div class="page-page flr">
								<ul class="pagination">
									<li class="epage">
										<a href="#">上一页</a>
									</li>
									<li class="active">
										<a href="#">1 <span class="sr-only">(current)</span></a>
									</li>
									<li>
										<a href="#">2</a>
									</li>
									<li>
										<a href="#">3</a>
									</li>
									<li>
										<a href="#">...</a>
									</li>
									<li class="epage">
										<a href="#">下一页</a>
									</li>
								</ul>
							</div>
							<div class="page-num flr">共9页，每页10条</div>
						</div>
					</div>
					<div class="jy_contet_list hidden">
						<div id="main_upmonth" style="height:400px;"></div>
					</div>
					<div class="jy_contet_list hidden">
						<div class="jy_paihang">
							<input type="radio" name="name1" checked="checked">&nbsp;&nbsp;<span>按销量</span>
							<input type="radio" name="name1">&nbsp;&nbsp;<span>按金额</span>
						</div>
						<div class="jy_paihang_caixi">
							<ul>
								<li>
									<span class="youcekuai"></span>
									<span class="jy_paihang_cai">经典火锅菜品:</span>
									<span class="jy_paihang_cai1">6.8%</span>
									<span class="jy_paihang_cai2">32100元</span>
								</li>
								<li>
									<span class="youcekuai"></span>
									<span class="jy_paihang_cai">=地方:</span>
									<span class="jy_paihang_cai1">6.8%</span>
									<span class="jy_paihang_cai2">32100元</span>
								</li>

								<li>
									<span class="youcekuai"></span>
									<span class="jy_paihang_cai">火锅菜品:</span>
									<span class="jy_paihang_cai1">6.8%</span>
									<span class="jy_paihang_cai2">32100元</span>
								</li>

								<li>
									<span class="youcekuai"></span>
									<span class="jy_paihang_cai">经典火回踩:</span>
									<span class="jy_paihang_cai1">6.8%</span>
									<span class="jy_paihang_cai2">32100元</span>
								</li>

							</ul>
						</div>
					</div>
					<div class="jy_contet_list hidden">
						<div class="jy_paihang">
							<select class="form-control paihang_select">
								<option>全部菜类</option>
								<option>全部菜类</option>
								<option>全部菜类</option>
								<option>全部菜类</option>
								<option>全部菜类</option>
							</select>
							<input type="radio" name="name1" checked="checked">&nbsp;&nbsp;<span>按销量</span>
							<input type="radio" name="name1">&nbsp;&nbsp;<span>按金额</span>
						</div>
						<div id="main_upmonth2" style="height:600px;"></div>
					</div>
				</div>

			</div>

			<div class="modal fade" id="aa" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">

						<!--添加评价项 -->
						<div class="modal-header">
							<div class="zuo-close" data-dismiss="modal">
								<i class="iconfont icon-o1"></i>
							</div>
							<h5 class="modal-title" id="myModalLabel">选择门店</h5>
						</div>
						<div class="modal-body height232">

							<div class="row select_mendian_row">
								<div class="col-sm-4 col-lg-3 col-xs-6 select_mendian"><span>云南涮烤白鱼旗舰店</span></div>
								<div class="col-sm-4 col-lg-3 col-xs-6 select_mendian"><span>云南涮烤白鱼旗舰店</span></div>
								<div class="col-sm-4 col-lg-3 col-xs-6 select_mendian"><span>fdafsdfsflsal</span></div>
								<div class="col-sm-4 col-lg-3 col-xs-6 select_mendian"><span>云南涮烤白鱼旗舰店</span></div>
								<div class="col-sm-4 col-lg-3 col-xs-6 select_mendian"><span>fdafsdfsflsal</span></div>
								<div class="col-sm-4 col-lg-3 col-xs-6 select_mendian"><span>云南涮烤白鱼旗舰店</span></div>
								<div class="col-sm-4 col-lg-3 col-xs-6 select_mendian"><span>fdafsdfsflsal</span></div>
								<div class="col-sm-4 col-lg-3 col-xs-6 select_mendian"><span>云南涮烤白鱼旗舰店</span></div>
								<div class="col-sm-4 col-lg-3 col-xs-6 select_mendian"><span>云南涮烤白鱼旗舰店</span></div>
								<div class="col-sm-4 col-lg-3 col-xs-6 select_mendian"><span>fdafsdfsflsal</span></div>
								<div class="col-sm-4 col-lg-3 col-xs-6 select_mendian"><span>fdafsdfsflsal</span></div>

							</div>

						</div>
						<div class="modal-footer shangjiaguanli_foot">
							<button type="button" class="btn save">确定</button>
						</div>
					</div>
					<!-- /.modal-content -->
				</div>
				<!-- /.modal -->
			</div>
			<div class="modal fade" id="identifier" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content padding-left-right-15">
						<div class="modal_header_tile">
							<div class="modal_header_time">
								<span class="modal_header_time_lf "><i class="iconfont icon-xiangzuo1"></i></span>
								<span class="modal_header_time_rt "><i class="iconfont icon-xiangyou1"></i></span>
								<input type="text" name="" class="modal_header_input ml0 " value="2016-12-16">
							</div>
							<div class="modal_header_serach">
								<button type="button" class="btn btn-info serach_btn">搜索&nbsp;&nbsp;<i class="icon iconfont icon-sousuo icon_serach"></i></button>
							</div>
							<dic class="clear"></dic>
						</div>

						<table class="table responsive" id="mytable">
							<thead>
								<tr>
									<th>序号</th>
									<th>营业额</th>
									<th>人数</th>
									<th>人均</th>
									<th>桌数</th>
									<th>桌均</th>
									<th class="text-center">上桌率</th>
								</tr>
							</thead>
							<tbody class='modal_tbody modal_tbody_click'>
								<tr>

								</tr>
							</tbody>
					</div>
				</div>
			</div>
			<script src="../assets/js/jquery.min.js"></script>
			<script src="../assets/js/bootstrap.min.js"></script>
			<script src="../assets/js/echarts.common.min.js"></script>
			<script src="../assets/js/main.js"></script>
			<script type="text/javascript">
			//选择门店
			$('.select_mendian_row span').on('click',function(){
        $(this).parent().siblings().children('span').removeClass('active');
        $(this).addClass('active')
      })
				colorStyle();
				// 给奇数行和偶数行不同的颜色
				function colorStyle() {
					$(".mytable").find("tr:even").addClass("oushu");
					$(".mytable").find("tr:odd").addClass("jishu");
					$(".mytable").find("tr:odd td:first-child").addClass("jishu");
				}

				// 给第一列高度
				firstTrHeight()

				function firstTrHeight() {
					for(var i = $(".mytable tr").length - 1; i >= 0; i--) {
						var trht = $(".mytable tr")[i].offsetHeight
						var domtr = $(".mytable tr")[i];
						// 有30px的边距
						$(domtr).children('td').height(trht - 30);
						$(domtr).children('.firsttd').css('line-height', trht - 30 + 'px');
					};
				}
				//切换月份
				$(".onemonth").on("click", function() {
					$(".onemonth").addClass("monthleiborder");
					$(".threemonth").removeClass("monthleiborder");
					$(".upmonth").removeClass("monthleiborder");
					$(".onemonthbody").removeClass("hidden");
					$(".threemonthbody").addClass("hidden");
					$(".upmonthbody").addClass("hidden");
					firstTrHeight();
				})
				$(".threemonth").on("click", function() {
					$(".onemonth").removeClass("monthleiborder");
					$(".threemonth").addClass("monthleiborder");
					$(".upmonth").removeClass("monthleiborder");
					$(".onemonthbody").addClass("hidden");
					$(".threemonthbody").removeClass("hidden");
					$(".upmonthbody").addClass("hidden");
					firstTrHeight();
				})
				$(".upmonth").on("click", function() {
						$(".onemonth").removeClass("monthleiborder");
						$(".threemonth").removeClass("monthleiborder");
						$(".upmonth").addClass("monthleiborder");
						$(".onemonthbody").addClass("hidden");
						$(".threemonthbody").addClass("hidden");
						$(".upmonthbody").removeClass("hidden");
						firstTrHeight();
					})
					// table切换选中第几个下面的第几个div显现

				$('.onemonthbody .jy_table_list ul li').on('click', function() {
					var index = $(this).index();
					$('.onemonthbody .jy_table_list ul li').removeClass("active")
					$('.onemonthbody .jy_table_list ul li').eq(index).addClass("active")
					$('.onemonthbody .jy_contet_list').addClass('hidden')
					$('.onemonthbody .jy_contet_list').eq(index).removeClass("hidden")
					firstTrHeight();
				})

				$('.threemonthbody .jy_table_list ul li').on('click', function() {
					var index = $(this).index();
					$('.threemonthbody .jy_table_list ul li').removeClass("active")
					$('.threemonthbody .jy_table_list ul li').eq(index).addClass("active")
					$('.threemonthbody .jy_contet_list').addClass('hidden')
					$('.threemonthbody .jy_contet_list').eq(index).removeClass("hidden")
					firstTrHeight();
				})

				$('.upmonthbody .jy_table_list ul li').on('click', function() {
						var index = $(this).index();
						$('.upmonthbody .jy_table_list ul li').removeClass("active")
						$('.upmonthbody .jy_table_list ul li').eq(index).addClass("active")
						$('.upmonthbody .jy_contet_list').addClass('hidden')
						$('.upmonthbody .jy_contet_list').eq(index).removeClass("hidden")
						firstTrHeight();
					})
					// 点击哪一行哪一行的信息获取到放到弹出框,将时间单独出来
				$('.table1 tr').on('click', function() {
					var htm = $(this).children('td:nth-child(2)').html();
					$('.modal_header_input').val(htm);
					$('#identifier').modal('show');
					var this_tr = $(this).html();
					$('.modal_tbody').html(this_tr);
				})

				// 图标的那个折线图
				charResize1()
				charResize2()
				charResize3()
					// 排行榜的那个条形图
				echrts1()
				echrts2()
				echrts3()
					// 窗口改变的时候改变
				window.onresize = function() {
						charResize1()
						echrts1()
						charResize2()
						echrts2()
						charResize3()
						echrts3()
					}
					// 图标的那个折线图
				function charResize1() {
					var wid = $('.content').width();

					$('#main').width(wid)
						// 基于准备好的dom，初始化echarts实例
					var myChart = echarts.init(document.getElementById('main'));
					// 指定图表的配置项和数据

					option1 = {
						tooltip: {
							trigger: 'axis'
						},

						xAxis: [{
							type: 'category',
							boundaryGap: false,
							data: [23, 24, 25, 26, 27, 28, 29, 23, 24, 25, 26, 27, 28, 29],
							splitLine: {
								show: true
							},
						}],
						yAxis: [{
							type: 'value'
						}],
						series: [{
							name: '营业销售额',
							type: 'line',
							smooth: true,
							stack: '总量',
							data: [1270, 1325, 1015, 1394, 900, 1230, 1210, 1270, 1325, 1015, 1394, 900, 1230, 1210],
							lineStyle: {
								normal: {
									color: '#e66b18',
									width: 5,
								}
							},
							label: {
								normal: {
									show: true,
									position: 'top',
								}
							},
							itemStyle: {
								normal: {
									// color:'black',
									borderColor: '#e66b18',
									shadowColor: '#e66b18'
								},
								emphasis: {
									color: '#e66b18',
								}
							}
						}]
					};
					// 使用刚指定的配置项和数据显示图表。

					myChart.setOption(option1);
				}
				// 排行榜的那个条形图
				function echrts1() {
					var wid = $('.content').width();
					$('#main2').width(wid)
					var myChart = echarts.init(document.getElementById('main2'));
					option = {

						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow'
							}
						},

						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'value',
							boundaryGap: [0, 0.01],
							position: 'top'
						},
						yAxis: {
							type: 'category',
							data: ['巴西', '印尼', '美国', '印度', '中国', '巴西', '印尼', '美国', '印度', '中国', '巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
						},
						series: [{
								name: '2011年',
								type: 'bar',
								data: [98888, 98888, 98888, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 18203, 23489, 29034, 104970, 131744, ],
								label: {
									normal: {
										show: true,
										position: 'right'
									}
								},
								itemStyle: {
									normal: {
										color: '#e66b18',
										borderColor: '#e66b18',
										shadowColor: '#e66b18'
									},
								},
							},

						]
					}
					myChart.setOption(option);

				}

				// 三个月的表
				function charResize2() {
					var wid = $('.content').width();

					$('#main_three').width(wid)
						// 基于准备好的dom，初始化echarts实例
					var myChart = echarts.init(document.getElementById('main_three'));
					// 指定图表的配置项和数据

					option1 = {
						tooltip: {
							trigger: 'axis'
						},

						xAxis: [{
							type: 'category',
							boundaryGap: false,
							data: [23, 24, 25, 26, 27, 28, 29, 23, 24, 25, 26, 27, 28, 29],
							splitLine: {
								show: true
							},
						}],
						yAxis: [{
							type: 'value'
						}],
						series: [{
							name: '营业销售额',
							type: 'line',
							smooth: true,
							stack: '总量',
							data: [1270, 1325, 1015, 1394, 900, 1230, 1210, 1270, 1325, 1015, 1394, 900, 1230, 1210],
							lineStyle: {
								normal: {
									color: '#e66b18',
									width: 5,
								}
							},
							label: {
								normal: {
									show: true,
									position: 'top',
								}
							},
							itemStyle: {
								normal: {
									// color:'black',
									borderColor: '#e66b18',
									shadowColor: '#e66b18'
								},
								emphasis: {
									color: '#e66b18',
								}
							}
						}]
					};
					// 使用刚指定的配置项和数据显示图表。

					myChart.setOption(option1);
				}

				function echrts2() {
					var wid = $('.content').width();
					$('#main_three2').width(wid)
					var myChart = echarts.init(document.getElementById('main_three2'));
					option = {

						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow'
							}
						},

						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'value',
							boundaryGap: [0, 0.01],
							position: 'top'
						},
						yAxis: {
							type: 'category',
							data: ['巴西', '印尼', '美国', '印度', '中国', '巴西', '印尼', '美国', '印度', '中国', '巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
						},
						series: [{
								name: '2011年',
								type: 'bar',
								data: [98888, 98888, 98888, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 18203, 23489, 29034, 104970, 131744, ],
								label: {
									normal: {
										show: true,
										position: 'right'
									}
								},
								itemStyle: {
									normal: {
										color: '#e66b18',
										borderColor: '#e66b18',
										shadowColor: '#e66b18'
									},
								},
							},

						]
					}
					myChart.setOption(option);

				}
				// 上个月的表
				function charResize3() {
					var wid = $('.content').width();

					$('#main_upmonth').width(wid)
						// 基于准备好的dom，初始化echarts实例
					var myChart = echarts.init(document.getElementById('main_upmonth'));
					// 指定图表的配置项和数据

					option1 = {
						tooltip: {
							trigger: 'axis'
						},

						xAxis: [{
							type: 'category',
							boundaryGap: false,
							data: [23, 24, 25, 26, 27, 28, 29, 23, 24, 25, 26, 27, 28, 29],
							splitLine: {
								show: true
							},
						}],
						yAxis: [{
							type: 'value'
						}],
						series: [{
							name: '营业销售额',
							type: 'line',
							smooth: true,
							stack: '总量',
							data: [1270, 1325, 1015, 1394, 900, 1230, 1210, 1270, 1325, 1015, 1394, 900, 1230, 1210],
							lineStyle: {
								normal: {
									color: '#e66b18',
									width: 5,
								}
							},
							label: {
								normal: {
									show: true,
									position: 'top',
								}
							},
							itemStyle: {
								normal: {
									// color:'black',
									borderColor: '#e66b18',
									shadowColor: '#e66b18'
								},
								emphasis: {
									color: '#e66b18',
								}
							}
						}]
					};
					// 使用刚指定的配置项和数据显示图表。

					myChart.setOption(option1);
				}

				function echrts3() {
					var wid = $('.content').width();
					$('#main_upmonth2').width(wid)
					var myChart = echarts.init(document.getElementById('main_upmonth2'));
					option = {

						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow'
							}
						},

						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'value',
							boundaryGap: [0, 0.01],
							position: 'top'
						},
						yAxis: {
							type: 'category',
							data: ['巴西', '印尼', '美国', '印度', '中国', '巴西', '印尼', '美国', '印度', '中国', '巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
						},
						series: [{
								name: '2011年',
								type: 'bar',
								data: [98888, 98888, 98888, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 18203, 23489, 29034, 104970, 131744, ],
								label: {
									normal: {
										show: true,
										position: 'right'
									}
								},
								itemStyle: {
									normal: {
										color: '#e66b18',
										borderColor: '#e66b18',
										shadowColor: '#e66b18'
									},
								},
							},

						]
					}
					myChart.setOption(option);

				}
			</script>
	</body>

</html>